<style>


    .el-table__header{
        border: 0px solid white;
    }
    .el-table{
        margin-top: 15px;
    }
    .has-gutter th{
        background-color: #2772ff;
        height: 45px;
        text-align: center;
        color: white!important;
    }
</style>


<div style="min-height: 790px" id="dphjtbox">
    <div id="dphjt">
        <div class="searchbox">
            <el-form ref="form" :model="form">
                <el-form-item label="订单号:" prop="orderid" class="itemInput" label-width="80px">
                    <el-input v-model="form.orderid" placeholder=""/>
                </el-form-item>

                <el-form-item label="店铺名:" prop="taskid" class="itemInput" label-width="80px">
                    <el-input v-model="form.shop_name" placeholder=""/>
                </el-form-item>

                <el-form-item label="任务ID:" prop="taskid" class="itemInput" label-width="80px">
                    <el-input v-model="form.taskid" placeholder=""/>
                </el-form-item>


                <el-form-item label-width="90px" label="开始时间:" class="itemdate" prop="date">
                    <el-date-picker style="width: 180px"
                                    v-model="form.date1"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label-width="90px" label="结束时间:" class="itemdate" prop="date">
                    <el-date-picker style="width: 180px"
                                    v-model="form.date2"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label-width="80px" label="类型:" class="sourcedate" prop="type_h">
                    <el-select style="width:100px" v-model="form.type_h" placeholder="状态" claer>
                        <el-option

                                key=""
                                label="全部"
                                value="">
                        </el-option>
                        <el-option
                                v-for="(value,key) in type_hlist"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label-width="90px" label="申诉:" class="sourcedate" prop="type_h">
                    <el-select style="width:100px" v-model="form.daifa_e" placeholder="状态" claer>
                        <el-option

                                key=""
                                label="全部"
                                value="">
                        </el-option>
                        <el-option
                                v-for="(value,key) in error"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="itembtn" label-width="40px">

                    <div class="search_button am-btn am-btn-secondary "  @click="getdata"> <img src="http://local.hunter.com//public/assets/image/chazhao.png">查询 </div>
                </el-form-item>
            </el-form>

        </div>
        <div class="fbneirong" style="margin-top: -20px">
            <div style="width: 100%;float: left;margin-top: -20px;">
                <el-button   type="primary" size="mini" icon="el-icon-download" @click="getexcel">导出物流代发任务</el-button>
            </div>

            <el-table v-loading="listLoading" :data="list.llly.list"
                      :row-style="{height:'20px'}"
                      :cell-style="{padding:'4px'}"
                      element-loading-text="加载中" fit highlight-current-row>
                <el-table-column label="ID" prop="id"
                                 align="center">
                </el-table-column>
                <el-table-column label="完成时间" prop="finishtime"
                                 align="center">
                </el-table-column>
                <el-table-column label="类型" prop="type_h"
                                 align="center">
                    <template slot-scope="scope">
                        {{type_hlist[scope.row.type_h]}}
                    </template>
                </el-table-column>
                <el-table-column label="店铺名称" prop="shop_name" :show-overflow-tooltip="true"
                                 align="center">
                </el-table-column>
                <el-table-column label="任务ID" prop="taskid"
                                 align="center">
                </el-table-column>
                <el-table-column label="订单号" align="center" prop="orderid" width="200px">
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                </el-table-column>

                <el-table-column label="地址" align="center" prop="addrees"  width="100px" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="快递公司" align="center" prop="express" >
                </el-table-column>
                <el-table-column label="快递单号" align="center" prop="expressorderid" width="150px" >
                </el-table-column>


                <el-table-column label="操作" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" v-if="scope.row.daifa_e==0" @click="setstatus(scope.row)">上报错误</el-button>
                        <el-button type="danger" size="small" v-else >待处理</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div class="hang pagination">
                <el-pagination background @current-change="current_change" layout="total,prev, pager, next"
                               :page-size="this.pagesize" :total="list.llly.total"></el-pagination>
            </div>
        </div>


    </div>

</div>


<script>
    var taskid="<?php  echo $taskid;?>";
    var toolCase = {
        //url参数转对象
        getRequest: function (urlStr) {
            if (typeof urlStr == "undefined") {
                var url = decodeURI(location.search); //获取url中"?"符后的字符串
            } else {
                var url = "?" + urlStr.split("?")[1];
            }
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                let strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        },
        getDateStr: function (AddDayCount, date) {
            if (date) {
                var timestamp2 = Date.parse(new Date(date));
                var dd = new Date(timestamp2);
            } else {
                var dd = new Date();
            }
            dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1; //获取当前月份的日期
            var d = dd.getDate();
            if (d < 10) {
                d = '0' + d
            }
            return y + '-' + (m < 10 ? '0' + m : m) + '-' + d;
        },
        isInteger: function (number) {
            var numReg = /^[0-9]*$/;
            var numRe = new RegExp(numReg);
            if (!numRe.test(number)) {
                return false;
            }
            return true;
        },
        uniqueArr: function (arr) {
            var x = new Set(arr);
            return [...x];
        },
        getDate: function () {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate(); //获取当前日

            return year + "年" + mon + "月" + date + "日"
        },

        /**
         * 统一表格排序
         * @param column
         * @param list
         * @returns {*}
         */
        changeTableSort: function (column, list, setlevel) {

            //获取字段名称和排序类型
            var fieldName = column.prop;
            var sortingType = column.order;

            function sortnum(a, b) {
                var aval = a[fieldName];
                var bval = b[fieldName];

                if (fieldName == 'date') {
                    aval = Date.parse(new Date(aval));
                    bval = Date.parse(new Date(bval));
                } else {
                    if (typeof (aval) == 'string') {
                        aval = (aval.replace("%", "")) * 1;
                        bval = (bval.replace("%", "")) * 1;
                    }
                }
                return (bval - aval);
            }

            function sortnum2(a, b) {
                var aval = a[fieldName];
                var bval = b[fieldName];
                if (fieldName == 'date') {
                    aval = Date.parse(new Date(aval));
                    bval = Date.parse(new Date(bval));
                } else {
                    if (typeof (aval) == 'string') {
                        aval = (aval.replace("%", "")) * 1;
                        bval = (bval.replace("%", "")) * 1;
                    }
                }
                return (aval - bval)
            }

            //按照降序排序
            if (sortingType == "descending") {
                list = list.sort(sortnum);
            }
            //按照升序排序
            else {
                list = list.sort(sortnum2);
            }
            if (setlevel) {//设置数据排序等级 以使用颜色深度进行展示
                let all = list[0][fieldName] * 1 - list[(list.length - 1)][fieldName] * 1
                if (list[0][fieldName] == list[(list.length - 1)][fieldName] * 1) {
                    $.each(list, function (i, v) {
                        v.level = 0;
                    })
                } else {
                    let avg = all / 10;
                    $.each(list, function (i, v) {
                        let value = v[fieldName];
                        v.level = parseInt(value / avg);
                    })
                }
            }
            return list
        },
    };

    new Vue({
        el: '#dphjtbox',
        filters: {
            statusFilter(status) {
                const statusMap = {
                    0: 'gray',
                    1: 'success',
                    2: 'success',
                    3: 'info',
                    4: 'danger',
                };
                return statusMap[status]
            }
        },
        data() {
            return {
                dialogtable: true,
                dialogtablefenxi: false,
                tabletitelfenxi: "",
                listLoading: false,
                type_hlist: {
                    1: "普通单",
                    2: "高留评",
                    3: "多多进宝",
                    4: "拼多多直播",
                },
                error:["无错误",'申诉中'],
                select: {
                    status: ["未发布", "已发布", "已发布(1)", "已完成(2)", "已废除"]
                },
                form: {
                    id: "",
                    orderid: "",
                    daifa:1,
                    date1: "",
                    date2: "",
                    type_h: "",
                    taskid: taskid,
                    daifa_e:"",
                    shop_name:"",
                },
                type: "line",
                list: {
                    productInfo: null,
                    gjclist: {
                        currpage: 1,
                        list: [],
                        total: 0
                    },
                    llly: {
                        currpage: 1,
                        list: [],
                        total: 0
                    },
                    fenxi: {
                        currpage: 1,
                        list: [],
                        total: 0
                    },

                },
                currpage: 1,
                pagesize: 10,
                tabletitel: "",


            }
        },
        created() {
            var today = toolCase.getDateStr(0)
           // this.form.date1 =  toolCase.getDateStr(-1) + " 00:00:00";
           // this.form.date2 = today + " 23:59:59";




            this.getdata()
        },

        methods: {
            handleChange(file, fileList) {

            },
            uploadurl() {
                return "<?php echo base_url(); ?>/hunter/excelToArray";
            },
            uploadsuccess(response, file, fileList) {
                if (response.code == 0) {
                    this.$message({
                        message: "订单完成",
                        type: 'success',
                        offset: 300,
                        duration: 1500
                    });
                    return
                }
                this.$message({
                    message: response.msg,
                    type: 'warning',
                    offset: 300,
                    duration: 1500
                });
            },

            getexcel() {
                let post = this.form;
                var url = "<?php echo base_url(); ?>/Business/GetJdOrderList";
                post.epage = 3000;
                post.page = 1;
                post.getexcel = 1;
                const form = document.createElement('form')
                form.id = "downloadform"
                form.style.display = 'none' //将表单隐藏
                form.target = ''
                form.method = 'post'
                form.action = url

                $.each(post, function (i, v) {
                    var input = document.createElement('input')
                    input.type = 'hidden'
                    input.name = i
                    input.value = v
                    form.appendChild(input)
                })

                document.body.appendChild(form)
                form.submit()
                document.body.removeChild(form) // 释放标签


            },
            getdata() {
                let post = this.form;
                let that = this;
                post.page = this.currpage;


                var url = "<?php echo base_url(); ?>/Business/GetJdOrderList";
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: post,
                    success: function (res) {
                        if (res.code != 0) {
                            that.$message({
                                message: res.msg,
                                type: 'warning',
                                offset: 300,
                                duration: 1500
                            });
                        } else {
                            that.list.llly.list = res.list;
                            that.list.llly.total = res.count;
                        }
                    }
                })


            },
            current_change(currentPage) {
                this.currpage = currentPage;
                this.getdata();
            },

            setstatus(row) {
                this.$confirm('确认上报快递错误', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.sendchange(row);
                }).catch(() => {

                });
            },

            sendchange(row) {
                console.log(row)

                let that = this;
                var url = "<?php echo base_url(); ?>/Business/seterror/"+row.id;
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {},
                    success: function (res) {
                        if (res.code != 0) {
                            that.$message({
                                message: res.msg,
                                type: 'warning',
                                offset: 300,
                                duration: 1500
                            });
                        } else {
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                offset: 300,
                                duration: 1500
                            });
                            that.getdata(1);
                        }
                    }
                })
            }
        }
    })
</script>

<style>
    .el-form {
        height: auto;
        overflow: hidden;
        padding: 10px;
    }

    .uploadPicButton {
        display: inline-block !important;
        float: right;
        width: 200px !important;
    }

    .el-upload__input {
        display: none !important;
    }

    input[type=text] {
        border: 0;
        border-radius: 3px;
        height: 30px;
        width: 500px;
    }

    .upload-demo {
        display: inline-block;
        width: auto;
        float: right;

    }
    .searchbox{
        height: auto;
    }
    #dphjt input {
        width: 100%;
    }

    #dphjt .itemInput {
        width: 220px;
        float: left;
    }
    .search_button{
        margin-left: 25px;
        height: 38px;

    }

    #dphjt .itemdate {
        width: 270px;
        float: left;
    }

    #dphjt .itembtn {
        width: 120px;
        float: left;
    }

    #dphjt .sourcedate {
        width: 150px;
        float: left;
    }


    #dphjt .title {
        border-left: solid 2px #5a5abf;
    }

    #dphjt .title .el-button {
        float: right;
        margin-right: 15px;
    }

    #dphjt .title > span:first-child {
        margin-left: 10px;
        font-weight: 700;
    }

    .hang {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 8px 0px;
    }



</style>
